<template>
  <div class="search">
    <div class="w">
      <el-tabs v-model="activeName">
        <el-tab-pane :key="tab" v-for="tab in tabs" :label="tab.label" :name="tab.name">
          <div class="result clearfix">
            <ul class="tab-con" v-if="results.length != 0 && select == '1'">
              <li :key="model" v-for="model in results">
                <a @click="goToProduce(model.produceId)">
                  <div class="tab-con-img">
                    <img :src="model.produceImgs" />
                  </div>
                  <div class="tab-con-price fl">
                    <span>￥</span>
                    <span v-text="model.producePrice"></span>
                  </div>
                  <div class="tab-con-content fr">
                    <span v-text="model.produceName" style="color:red;font-weight:bold;"></span>
                    <br />
                    <span v-text="model.produceDesc"></span>
                  </div>
                </a>
              </li>
            </ul>
            <ul class="tab-con" v-else-if="results.length != 0 && select == '2'">
              <li :key="model" v-for="model in results">
                <a @click="goToStore(model.storeId)">
                  <div class="tab-con-img">
                    <img :src="model.storeIcon" />
                  </div>
                  <div class="tab-con-price fl">
                    <span v-text="model.storeName"></span>
                  </div>
                  <div class="tab-con-content fr">
                    <span v-text="model.storeDesc"></span>
                    <br />
                    <span v-text="model.storeAnno"></span>
                  </div>
                </a>
              </li>
            </ul>
            <div class="nothing" v-else v-text="msg"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    select: {
      type: String,
      default() {
        return "1";
      },
    },
    input: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      activeName: "first",
      selectObj: "produce",
      selectObjKey1: "produceName",
      selectObjKey2: "produceDesc",
      tabs: [
        { label: "模糊查询", name: "first" },
        { label: "精准查询", name: "second" },
        { label: "价格升序", name: "third" },
        { label: "价格降序", name: "fourth" },
      ],
      results: [],
      msg: "正在查找中，请稍等！", // 抱歉！什么也没有找到……
      oldSelect: "1",
      oldInput: "",
      oldActiveName: "first",
    };
  },
  computed: {},
  watch: {
    select: function () {
      this.startSearch();
    },
    input: function () {
      this.startSearch();
    },
    activeName: function () {
      this.startSearch();
    },
  },
  methods: {
    startSearch() {
      if (
        !(
          this.select == this.oldSelect &&
          this.input == this.oldInput &&
          this.activeName == this.oldActiveName
        )
      ) {
        console.log("perpare search: " + this.select + " " + this.input + " " + this.activeName);
        this.msg = "正在查找中，请稍等！";
        if (this.select == "1") {
          this.selectObj = "produce";
          this.selectObjKey1 = "produceName";
          this.selectObjKey2 = "produceDesc";
        } else {
          this.selectObj = "store";
          this.selectObjKey1 = "storeName";
          this.selectObjKey2 = "storeDesc";
        }
        if (this.activeName == "first") {
          this.fuzzySearch();
        } else if (this.activeName == "second") {
          this.accurateSearch();
        } else {
          this.sequenceSearch();
        }
        this.oldSelect = this.select;
        this.oldInput = this.input;
        this.oldActiveName = this.activeName;
      }
    },
    fuzzySearch() { // 模糊查询
      this.results = [];
      var url = process.env.SEARCH_URL + this.selectObj + "/" + this.selectObj + "/fuzzy?";
      var nameUrl = url + "key=" + this.selectObjKey1 + "&&value=" + this.input;
      this.$http
        .get(nameUrl)
        .then(
          (response) => {
            console.log("connect " + nameUrl + " success");
            console.log(response);
            console.log(response.body.fuzzy.list);
            this.results = this.results.concat(JSON.parse(JSON.stringify(response.body.fuzzy.list)));
            // 数组去重
            var r = this.results;
            const res = new Map();
            if(this.selectObj == "produce") {
              this.results = r.filter((r) => !res.has(r.produceId) && res.set(r.produceId, 1));
            } else {
              this.results = r.filter((r) => !res.has(r.storeId) && res.set(r.storeId, 1));
            }
            console.log(this.results.length);
            if(this.results.length == 0) {
              this.msg = "抱歉！什么也没有找到……";
            }
          },
          (response) => {
            console.log("search error: cannot connect " + nameUrl);
            this.msg = "请求失败！";
          }
        );
      // var descUrl = url + "key=" + this.selectObjKey2 + "&&value=" + this.input;
      // this.$http
      //   .get(descUrl)
      //   .then(
      //     (response) => {
      //       console.log("connect " + descUrl + " success");
      //       console.log(response);
      //       console.log(response.body.fuzzy.list);
      //       this.results = this.results.concat(JSON.parse(JSON.stringify(response.body.fuzzy.list)));
      //       console.log(this.results.length);
      //     },
      //     (response) => {
      //       console.log("search error: cannot connect " + descUrl);
      //     }
      //   );
    },
    accurateSearch() { // 精准查询
      this.results = [];
      var url = process.env.SEARCH_URL + this.selectObj + "/" + this.selectObj + "/accurate?";
      var nameUrl = url + "key=" + this.selectObjKey1 + "&&value=" + this.input;
      this.$http
        .get(nameUrl)
        .then(
          (response) => {
            console.log("connect " + nameUrl + " success");
            console.log(response);
            console.log(response.body.accurate.list);
            this.results = this.results.concat(JSON.parse(JSON.stringify(response.body.accurate.list)));
            // 数组去重
            var r = this.results;
            const res = new Map();
            if(this.selectObj == "produce") {
              this.results = r.filter((r) => !res.has(r.produceId) && res.set(r.produceId, 1));
            } else {
              this.results = r.filter((r) => !res.has(r.storeId) && res.set(r.storeId, 1));
            }
            if(this.results.length == 0) {
              this.msg = "抱歉！什么也没有找到……";
            }
            console.log(this.results.length);
          },
          (response) => {
            console.log("search error: cannot connect " + nameUrl);
            this.msg = "请求失败！";
          }
        );
      // var descUrl = url + "key=" + this.selectObjKey2 + "&&value=" + this.input;
      // this.$http
      //   .get(descUrl)
      //   .then(
      //     (response) => {
      //       console.log("connect " + descUrl + " success");
      //       console.log(response);
      //       console.log(response.body.accurate.list);
      //       this.results = this.results.concat(JSON.parse(JSON.stringify(response.body.accurate.list)));
      //       console.log(this.results.length);
      //     },
      //     (response) => {
      //       console.log("search error: cannot connect " + descUrl);
      //     }
      //   );
    },
    sequenceSearch() { // 排序查询
      if(this.select == "2") {
        this.results = [];
        this.msg = "店铺检索不适用于此选项！";
      } else {
        if(this.results.length == 0) {
          this.msg = "抱歉！什么也没有找到……";
        } else {
          var type = "producePrice";
          if(this.activeName == "third") {
            this.sort(type, true);
          } else {
            this.sort(type, false);
          }
        }
      }
    },
    sort(type, isAsc) {
      if(isAsc) {
        this.results.sort(this.compareUp(type));
      } else {
        this.results.sort(this.compareDown(type));
      }
    },
    compareUp(attr) {
      return function(a,b) {
        var x = a[attr];
        var y = b[attr];
        return x - y;
      }
    },
    compareDown(attr) {
      return function(a,b) {
        var x = a[attr];
        var y = b[attr];
        return y - x;
      }
    },
    goToProduce(id) {
      window.open(process.env.PRODUCE_URL + id, '_blank');
    },
    goToStore(id) {
      window.open(process.env.STORE_URL + id, '_blank');
    },
  },
  mounted() {
    this.oldSelect = "1";
    this.oldInput = "";
    this.oldActiveName = "first";
    this.startSearch();
  },
};
</script>

<style scoped>
.search {
  padding-top: 10px;
  border-top: 2px solid #b1191a;
}
.result {
  width: 100%;
}
.tab-con li {
  float: left;
  width: 298px;
  height: 340px;
  border: 1px solid#f4f4f4;
}
.tab-con li:hover {
  border-color: #ff5500;
}
.tab-con-img img {
  display: block;
  overflow: hidden;
  height: 300px;
  width: 100%;
  transform: scale(0.8);
}
.tab-con-price {
  width: 40%;
  height: 39px;
  text-align: center;
  line-height: 39px;
  font-size: 18px;
  color: #ff5500;
}
.tab-con-content {
  width: 57%;
  height: 39px;
  padding-right: 5px;
  font-size: 12px;
}
.tab-con-content span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;/* 不换行 */
  text-overflow: ellipsis;
}
.nothing {
  width: 100%;
  height: 340px;
  font-size: 20px;
  font-weight: bold;
  line-height: 340px;
  text-align: center;
  color: #b1191a;
}
</style>